<template>
	<view class="container">
		<image src="https://jingfeiwrj.oss-cn-shenzhen.aliyuncs.com/jingfei/bg2.jpg" class="bg" mode="aspectFill">
		</image>

		<view class="overlay">
			<TopNavVue />
			<view style="padding: 32rpx;margin-top: 170rpx;">
				<u-swiper :list="list1" @change="change" @click="click" height="140"></u-swiper>
			</view>
			<view style=" padding: 32rpx;">
				<view
					style="display: flex;justify-content: center; height: 180rpx;width: 630rpx; padding: 32rpx;background-color: white;border-radius: 10rpx;">
					<u-grid :border="false" @click="click_1" col="4">
						<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
							<image :src="baseListItem.name" style="height: 130rpx;width: 130rpx;"></image>
							<text class="grid-text">{{baseListItem.title}}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<view style="padding: 32rpx;">
				<u-notice-bar :text="text1" bgColor="white" color="black"></u-notice-bar>
			</view>
			<view style="padding: 32rpx;">
				<text style="font-weight: 600;font-style: normal;font-size: 35rpx;font-family: PingFang SC;">最新发布</text>
				<image src="../../static/img/Frame.png" style="height: 45rpx;width: 45rpx;padding-left: 10rpx;"></image>

				<view style="display: flex;">
					<view style="display: flex; padding-top: 30rpx; flex-wrap: wrap;">
						<view style="position: relative;">
							<image src="https://jingfeiwrj.oss-cn-shenzhen.aliyuncs.com/jingfei/lb4.jpg"
								style="width: 420rpx; height: 180rpx;"></image>
							<view style="position: absolute;top: -20rpx; padding: 10rpx;">
								<image src="../../static/icon/Badge_nj.png" style="height: 85rpx; width: 120rpx;"
									mode="aspectFit"></image>
							</view>
							<view
								style="position: absolute;top: 125rpx;background: linear-gradient(to right, rgb(75,163,103,0.9), rgb(29,233,202,0.9));width: 420rpx;height: 60rpx;">
								<view style="display: flex;justify-content: space-around;">
									<view style="padding: 10rpx; color: #FFF;font-size: 30rpx;font-weight: 700;">提供E5型农机
									</view>
									<view style="padding: 15rpx; color: #FFF;font-size: 26rpx;">12km</view>
								</view>
							</view>
						</view>
						<view style="position: relative;">
							<image src="https://jingfeiwrj.oss-cn-shenzhen.aliyuncs.com/jingfei/lb5.jpg"
								style="width: 420rpx; height: 180rpx;"></image>
							<view style="position: absolute; top: -20rpx; padding: 10rpx;">
								<image src="../../static/icon/Badge_famer.png" style="height: 85rpx; width: 120rpx;"
									mode="aspectFit"></image>
							</view>
							<view
								style="position: absolute;top: 125rpx;background: linear-gradient(to right, rgb(75,163,103,0.9), rgb(29,233,202,0.9));width: 420rpx;height: 60rpx;">
								<view style="display: flex;justify-content: space-around;">
									<view style="padding: 10rpx; color: #FFF;font-size: 30rpx;font-weight: 700;">寻插秧机
									</view>
									<view style="padding: 15rpx; margin-left: 50rpx; color: #FFF;font-size: 26rpx;">12km
									</view>
								</view>
							</view>
						</view>
					</view>
					<view style="padding: 10rpx;margin-top: 20rpx;">
						<image src="../../static/img/advertisement_1.png" style="height: 380rpx;width: 280rpx;"></image>
					</view>
				</view>

				<view style="padding-top: 10rpx;">
					<text
						style="font-weight: 600;font-style: normal;font-size: 35rpx;font-family: PingFang SC;">特惠农资</text>
					<image src="../../static/img/Frame.png" style="height: 45rpx;width: 45rpx;padding-left: 10rpx;">
					</image>
				</view>

				<view
					style="padding-top: 25rpx; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around;">

					<template v-for="(item, index) in 10">
						<view
							style="box-shadow: 0px 0px 16rpx 0px rgba(214, 231, 203, 0.30); border-top-left-radius: 10rpx; border-top-right-radius: 10rpx; height: 480rpx; width: 330rpx; background-color: white; margin-top: 15rpx;">
							<image src="../../static/Product-Img.png"
								style="height: 325rpx; width: 330rpx; border-top-left-radius: 10rpx; border-top-right-radius: 10rpx;">
							</image>
							<view style="padding: 5rpx;">
								<text style="font-weight: 700; font-size: 35rpx;">优质东北大豆苗</text>
								<view style="display: flex; padding-top: 10rpx;">
									<u-icon custom-prefix="icon-shield-star-fill iconfont" size="10"
										color="rgb(75,163,103,1)"></u-icon>
									<text style="color: rgb(75,163,103,1); font-size: 22rpx;">政府补贴</text>
									<text style="color: red; font-size: 22rpx; margin-left: 30rpx;">立减3元/公斤</text>
								</view>
								<view style="padding: 5rpx; display: flex;">
									<view style="width: 100%;">
										<text
											style="font-size: 30rpx; color: red; font-weight: 700; padding-top: 15rpx;">20</text>
										<text style="font-size: 22rpx; color: red; margin-left: 10rpx;">元/公斤</text>
										<text
											style="color: #909399; font-size: 20rpx; padding-left: 50rpx;">已达成交易200</text>
									</view>
								</view>
							</view>
						</view>

						<!-- 只在第四个商品后插入广告 -->
						<view v-if="index === 3" style="width: 92.5vw;display: flex;justify-content: center;">
							<image src="../../static/img/advertisement.png" style="width: 92.5vw; height: 150rpx;"
								mode="aspectFit">
							</image>
						</view>
					</template>
				</view>

				<view style="padding-top: 100rpx;">
					<u-loadmore loadmoreText="没有更多内容了"  dashed line />
				</view>
				<view style="display: flex;justify-content: center;margin-top: 60rpx;">
					<image src="../../static/img/logo.png" style="height: 100rpx;width: 130rpx;" mode="aspectFit"></image>
					<view style="line-height: 100rpx;">数字化农业-助力乡村振兴</view>
				</view>
				

			</view>
			<ModelComponents />
			<helang-tab-bar-bulge :fixed-bottom="true" :currents="0"></helang-tab-bar-bulge>
		</view>
	</view>
</template>

<script>
	import tabBarBulge from "@/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-bulge";
	import TopNavVue from "../../components/TopNav/TopNav.vue";
	import ModelComponents from "../../components/Model/Model.vue"
	
	export default {
		components: {
			"helang-tab-bar-bulge": tabBarBulge,
			TopNavVue,
			ModelComponents
			
		},
		data() {
			return {
				list1: [
					'https://jingfeiwrj.oss-cn-shenzhen.aliyuncs.com/jingfei/lb1.jpg',
					'https://jingfeiwrj.oss-cn-shenzhen.aliyuncs.com/jingfei/lb2.jpg',
					'https://jingfeiwrj.oss-cn-shenzhen.aliyuncs.com/jingfei/lb3.jpg',
				],
				baseList: [{
						name: '../../static/icon/Icon.png',
						title: '发布农活'
					},
					{
						name: '../../static/icon/Icon_1.png',
						title: '提供农机'
					},
					{
						name: '../../static/icon/Icon_2.png',
						title: '农资商城'
					},
					{
						name: '../../static/icon/Icon_3.png',
						title: '农业资讯'
					},
				],
				text1: '12月娄底涟源无人机灌溉技能比拼圆满结束'
			}
		},
		methods: {
			change(index) {
				console.log('Swiper changed to index:', index);
			},
			click(item) {
				console.log('Clicked item:', item);
			},
			click_1(name) {
				this.$refs.uToast.success(`点击了第${name}个`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		/* 允许子元素绝对定位 */

		/* 使容器高度占满整个视口 */
		overflow: hidden;
		background-color: white;
		/* 隐藏超出容器外的内容 */
	}

	.bg {
		position: absolute;
		/* 绝对定位 */
		top: 0;
		left: 0;
		width: 100%;
		/* 宽度占满 */
		height: 21%;
		/* 高度占满 */
		z-index: 1;
		/* 设置较低的层级 */
	}

	.overlay {
		position: relative;
		/* 回到正常流，确保绝对定位的背景能够显示 */
		z-index: 2;
		/* 确保覆盖在背景之上 */
		opacity: 0.9;
		/* 设置一定透明度 */
	}

	.grid-text {
		font-size: 14px;
		color: black;
		font-weight: 700;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	::v-deep .helang-tab-bar .bar.fixed.data-v-7a0948d1 {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 119rpx;
		width: 750rpx;
	}
</style>